<template>
  <div class="dashboard-container">
    <div class="app-container">
      <p><el-icon>
          <InfoFilled />
        </el-icon>共<span>{{ tableData.length }}</span>条数据</p>
      <div>
        <el-button type="success" @click="derive">导出</el-button>
        <el-button type="primary">导入
          <input type="file" accept=".xls,.xlsx" class="upload-file" ref="uploadImgBtn" @change="Excel($event)" />
        </el-button>
      </div>
    </div>
    <div class="bg">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" />
        <el-table-column prop="username" label="姓名" />
        <el-table-column prop="mobile" label="手机号" />
        <el-table-column prop="workNumber" label="工号" />
        <el-table-column prop="departmentName" label="部门" />
        <el-table-column fixed="right" label="操作">
          <template #default>
            <el-button link type="primary" size="small">查看</el-button>
            <el-button link type="primary" size="small">转正</el-button>
            <el-button link type="primary" size="small">调岗</el-button>
            <el-button link type="primary" size="small">离职</el-button>
            <el-button link type="primary" size="small">角色</el-button>
            <el-button link size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { reactive, toRefs, computed, watch, onMounted, ref } from "vue";
import { getuser } from '../../http/login'
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import * as XLSX from 'xlsx'

let router = useRouter();
let store = useStore();
const data = reactive({
  params: {
    page: 1,
    size: 20
  },
  tableData: []//数据
})
const tableData = ref([])
const getDataList = () => {
  getuser(data.params).then(res => {
    console.log(666666666, res);
    tableData.value = res.data.rows
  })
}

getDataList()
//导出工序
const derive = () => {
  let exportData = []
  //导出数据结构构造
  tableData.value.forEach(item => {
    exportData.push({
      username: item.username,
      mobile: item.mobile,
      workNumber: item.workNumber,
      departmentName: item.departmentName ? item.departmentName : "",
    })
  })
  //导出表头设计
  let head = {
    username: "姓名",
    mobile: "手机号",
    workNumber: "工号",
    departmentName: "部门",
  }
  //表头数据切换
  const list = exportData.map(item => {
    const obj = {}
    for (const k in item) {
      if (head[k]) {
        obj[head[k]] = item[k]
      }
    }
    return obj
  })
  // 创建工作表
  const data = XLSX.utils.json_to_sheet(list)
  // 创建工作簿
  const wb = XLSX.utils.book_new()
  // 将工作表放入工作簿中
  XLSX.utils.book_append_sheet(wb, data, 'data')
  // 生成文件并下载
  XLSX.writeFile(wb, '导出工序.xlsx')
}
// 导入
function Excel(w) {
  const files = w.target.files
  if (files.length <= 0) {
    return false
  } else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
    return false
  }
  // 读取表格
  const fileReader = new FileReader()
  fileReader.onload = ev => {
    const workbook = XLSX.read(ev.target.result, {
      type: "binary"
    })
    const wsname = workbook.SheetNames[0]
    const xl = XLSX.utils.sheet_to_json(workbook.Sheets[wsname])
    dealExcel(xl) //...对数据进行自己需要的操作 
  }
  fileReader.readAsBinaryString(files[0])
}

function dealExcel(xl) {
  let keymap = {  // 根据所要导入的文件转换开头
    "姓名": "username",
    "手机号": 'mobile',
    "工号": 'workNumber',
    "部门": 'departmentName'
  }
  xl.forEach(sourceObj => {
    Object.keys(sourceObj).map(keys => {
      let newKey = keymap[keys]
      if (newKey) {
        sourceObj[newKey] = sourceObj[keys]
        delete sourceObj[keys]
      }
    })
  })
  tableData.value.push (...xl)
  console.log(1377777, tableData.value);
}
</script>

<style scoped lang="scss">
.app-container {
  background-color: #fff;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;

  p {
    width: 120px;
    line-height: 30px;
    height: 30px;
    background-color: rgb(169, 231, 248);
  }
}

.bg {
  background-color: #fff;
}
</style>
